import { ref } from 'vue'
import { defineStore } from 'pinia'
import { getLineDataAPI, getPieDataAPI, getGaugeDataAPI } from '@/apis/view'
export const useViewStore = defineStore('view', () => {
  // state
  const lineData = ref({
    title: {
      text: '七日数据情况'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: []
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [],

  },)


  const pieData = ref({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '用户使用时长',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: []
      }
    ]
  })

  const gaugeData = ref([
    {
      value: 0,
      name: '设备总数量',
      title: {
        offsetCenter: ['0%', '-30%']
      },
      detail: {
        valueAnimation: true,
        offsetCenter: ['0%', '-20%']
      }
    },
    {
      value: 0,
      name: '设备可用数量',
      title: {
        offsetCenter: ['0%', '0%']
      },
      detail: {
        valueAnimation: true,
        offsetCenter: ['0%', '10%']
      }
    },
    {
      value: 0,
      name: '设备在用数量',
      title: {
        offsetCenter: ['0%', '30%']
      },
      detail: {
        valueAnimation: true,
        offsetCenter: ['0%', '40%']
      }
    }
  ])
  const gaugeOption = ref({
    series: [
      {
        type: 'gauge',
        startAngle: 90,
        endAngle: -270,
        pointer: {
          show: false
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            borderWidth: 1,
            borderColor: '#464646'
          }
        },
        axisLine: {
          lineStyle: {
            width: 40
          }
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          distance: 50
        },
        data: gaugeData.value,
        title: {
          fontSize: 14
        },
        detail: {
          width: 50,
          height: 14,
          fontSize: 14,
          color: 'inherit',
          borderColor: 'inherit',
          borderRadius: 20,
          borderWidth: 1,
          formatter: '{value}%'
        }
      }
    ]
  })

  const chartLine = ref({})

  const chartPie = ref({})

  const chartGauge = ref({})


  //获取order的统计数据渲染信息
  const getViewCountInfo = async () => {
    const line = await getLineDataAPI()
    const pie = await getPieDataAPI()
    const gauge = await getGaugeDataAPI()
    const total = gauge.data.data[0] + gauge.data.data[1] + gauge.data.data[2]
    gaugeData.value[0].value = parseInt(gauge.data.data[0] / total * 100)
    gaugeData.value[1].value = parseInt(gauge.data.data[1] / total * 100)
    gaugeData.value[2].value = parseInt(gauge.data.data[2] / total * 100)
    pieData.value.series[0].data = pie.data.data
    lineData.value.legend.data = line.data.legendData
    lineData.value.series = line.data.series
    lineData.value.xAxis.data = line.data.xAxisData
    console.log(pieData.value)
  }

  return {
    getViewCountInfo,
    lineData,
    chartLine,
    pieData,
    chartPie,
    gaugeOption,
    chartGauge,
  }
})